<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="keywords" content=""/>
		<meta name="description" content=""/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="msapplication-tap-highlight" content="no">
		<title>购物车</title>
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/header_common.css" />
		<link rel="stylesheet" href="css/cart.css" />
	    <link rel="stylesheet" href="css/swiper.min.css">
	    <script type="text/javascript" src="js/font-size.js" ></script>
	    <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
	</head>
	<body>
		<header>
			<div class="title_top">
				<a href="order_list.html" class="title_top_first">
					<img src="img/back.png"  class="hea_img"/>
				</a>
				<span class="title_top_center">购物车</span>
			</div>
		</header>
		<!--头部结束-->
		<div class="shopping">
		
		    <div class="shop_group_item">
		        <div class="shop_name">
		            <input type="checkbox" class="check goods_check shopCheck goods_check_title"> 
		            <span style="width: 2rem;height: 0.5rem;line-height: 0.5rem;margin-left: 0.5rem;">
		            	<a href="#" style="font-size: 0.3rem;">苹果专卖店</a>
		            </span>
		            <div class="coupons"><span>领券</span><em>|</em><span>编辑</span></div>
		        </div>
	        	<div class="shop_goods_list">
	                <div class="shop_info">
	                    <!--<input type="checkbox" class="check goods_check goodsCheck">-->
	                    <div class="xuanzhong_duigou">
	                    	<input type="checkbox" class="check goods_check goodsCheck">
	                    </div>
	                    <div class="shop_info_img">
	                        <a href="details_goods.html" class="shop_info_img_a">
	                        	<img src="http://www.jq22.com/img/cs/500x500a.png">
	                        </a>
	                    </div>
	                    <div class="shop_info_text">
	                        <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
	                        <div class="shop_brief"><span>重量:3.3kg</span><span>颜色:标配版</span><span>版本:13.3英寸</span></div>
	                        <div class="shop_price">
	                            <div class="shop_pices">
	                            	￥<b class="price">1000.00</b>
	                            	<span>返现￥30.00</span>
	                            </div>
	                            
	                        </div>
	                       <!-- 购物车数量加减-->
	                        <div class="shop_arithmetic">
                                <a href="javascript:;" class="minus">
                                	<img src="img/jianhao.png" />
                                </a>
                                <span class="num">1</span>
                                <a href="javascript:;" class="plus">
                                	<img src="img/jiahao.png" />
                                </a>
                            </div>
	                    </div>
	                </div>
	                <div class="shop_info">
	                    <!--<input type="checkbox" class="check goods_check goodsCheck">-->
	                    <div class="xuanzhong_duigou">
	                    	<input type="checkbox" class="check goods_check goodsCheck">
	                    </div>
	                    <div class="shop_info_img">
	                        <a href="details_goods.html" class="shop_info_img_a">
	                        	<img src="http://www.jq22.com/img/cs/500x500a.png">
	                        </a>
	                    </div>
	                    <div class="shop_info_text">
	                        <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
	                        <div class="shop_brief"><span>重量:3.3kg</span><span>颜色:标配版</span><span>版本:13.3英寸</span></div>
	                        <div class="shop_price">
	                            <div class="shop_pices">
	                            	￥<b class="price">1000.00</b>
	                            	<span>返现￥30.00</span>
	                            </div>
	                            
	                        </div>
	                       <!-- 购物车数量加减-->
	                        <div class="shop_arithmetic">
                                <a href="javascript:;" class="minus">
                                	<img src="img/jianhao.png" />
                                </a>
                                <span class="num">1</span>
                                <a href="javascript:;" class="plus">
                                	<img src="img/jiahao.png" />
                                </a>
                            </div>
	                    </div>
	                </div>
	                <div class="shop_info">
	                    <!--<input type="checkbox" class="check goods_check goodsCheck">-->
	                    <div class="xuanzhong_duigou">
	                    	<input type="checkbox" class="check goods_check goodsCheck">
	                    </div>
	                    <div class="shop_info_img">
	                        <a href="details_goods.html" class="shop_info_img_a">
	                        	<img src="http://www.jq22.com/img/cs/500x500a.png">
	                        </a>
	                    </div>
	                    <div class="shop_info_text">
	                        <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
	                        <div class="shop_brief"><span>重量:3.3kg</span><span>颜色:标配版</span><span>版本:13.3英寸</span></div>
	                        <div class="shop_price">
	                            <div class="shop_pices">
	                            	￥<b class="price">1000.00</b>
	                            	<span>返现￥30.00</span>
	                            </div>
	                            
	                        </div>
	                       <!-- 购物车数量加减-->
	                        <div class="shop_arithmetic">
                                <a href="javascript:;" class="minus">
                                	<img src="img/jianhao.png" />
                                </a>
                                <span class="num">1</span>
                                <a href="javascript:;" class="plus">
                                	<img src="img/jiahao.png" />
                                </a>
                            </div>
	                    </div>
	                </div>
	                
	            </div>
		        <div class="shopPrice">本店总计：￥<span class="shop_total_amount ShopTotal">0.00</span></div>
		    </div>
		
		    <div class="shop_group_item">
		        <div class="shop_name">
		            <input type="checkbox" class="check goods_check shopCheck goods_check_title"> 
		            <span style="width: 2rem;height: 0.5rem;line-height: 0.5rem;margin-left: 0.5rem;">
		            	<a href="#" style="font-size: 0.3rem;">苹果专卖店</a>
		            </span>
		            <div class="coupons"><span>领券</span><em>|</em><span>编辑</span></div>
		        </div>
	        	<div class="shop_goods_list">
	                <div class="shop_info">
	                    <!--<input type="checkbox" class="check goods_check goodsCheck">-->
	                    <div class="xuanzhong_duigou">
	                    	<input type="checkbox" class="check goods_check goodsCheck">
	                    </div>
	                    <div class="shop_info_img">
	                        <a href="details_goods.html" class="shop_info_img_a">
	                        	<img src="http://www.jq22.com/img/cs/500x500a.png">
	                        </a>
	                    </div>
	                    <div class="shop_info_text">
	                        <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
	                        <div class="shop_brief"><span>重量:3.3kg</span><span>颜色:标配版</span><span>版本:13.3英寸</span></div>
	                        <div class="shop_price">
	                            <div class="shop_pices">
	                            	￥<b class="price">1000.00</b>
	                            	<span>返现￥30.00</span>
	                            </div>
	                            
	                        </div>
	                       <!-- 购物车数量加减-->
	                        <div class="shop_arithmetic">
                                <a href="javascript:;" class="minus">
                                	<img src="img/jianhao.png" />
                                </a>
                                <span class="num">1</span>
                                <a href="javascript:;" class="plus">
                                	<img src="img/jiahao.png" />
                                </a>
                            </div>
	                    </div>
	                </div>
	                <div class="shop_info">
	                    <!--<input type="checkbox" class="check goods_check goodsCheck">-->
	                    <div class="xuanzhong_duigou">
	                    	<input type="checkbox" class="check goods_check goodsCheck">
	                    </div>
	                    <div class="shop_info_img">
	                        <a href="details_goods.html" class="shop_info_img_a">
	                        	<img src="http://www.jq22.com/img/cs/500x500a.png">
	                        </a>
	                    </div>
	                    <div class="shop_info_text">
	                        <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
	                        <div class="shop_brief"><span>重量:3.3kg</span><span>颜色:标配版</span><span>版本:13.3英寸</span></div>
	                        <div class="shop_price">
	                            <div class="shop_pices">
	                            	￥<b class="price">1000.00</b>
	                            	<span>返现￥30.00</span>
	                            </div>
	                            
	                        </div>
	                       <!-- 购物车数量加减-->
	                        <div class="shop_arithmetic">
                                <a href="javascript:;" class="minus">
                                	<img src="img/jianhao.png" />
                                </a>
                                <span class="num">1</span>
                                <a href="javascript:;" class="plus">
                                	<img src="img/jiahao.png" />
                                </a>
                            </div>
	                    </div>
	                </div>
	                <div class="shop_info">
	                    <!--<input type="checkbox" class="check goods_check goodsCheck">-->
	                    <div class="xuanzhong_duigou">
	                    	<input type="checkbox" class="check goods_check goodsCheck">
	                    </div>
	                    <div class="shop_info_img">
	                        <a href="details_goods.html" class="shop_info_img_a">
	                        	<img src="http://www.jq22.com/img/cs/500x500a.png">
	                        </a>
	                    </div>
	                    <div class="shop_info_text">
	                        <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
	                        <div class="shop_brief"><span>重量:3.3kg</span><span>颜色:标配版</span><span>版本:13.3英寸</span></div>
	                        <div class="shop_price">
	                            <div class="shop_pices">
	                            	￥<b class="price">1000.00</b>
	                            	<span>返现￥30.00</span>
	                            </div>
	                            
	                        </div>
	                       <!-- 购物车数量加减-->
	                        <div class="shop_arithmetic">
                                <a href="javascript:;" class="minus">
                                	<img src="img/jianhao.png" />
                                </a>
                                <span class="num">1</span>
                                <a href="javascript:;" class="plus">
                                	<img src="img/jiahao.png" />
                                </a>
                            </div>
	                    </div>
	                </div>
	                
	            </div>
		        <div class="shopPrice">本店总计：￥<span class="shop_total_amount ShopTotal">0.00</span></div>
		    </div>
		</div>
		
		
		<footer class="footer_bottom">
			<div class="payment_bar">
			    <div class="all_checkbox">
			    	<input type="checkbox" class="check goods_check" id="AllCheck" style="margin-top: -0.7rem;">全选
			    </div>
			    <a href="#" class="settlement">结算</a>
			    <div class="shop_total">
			        <strong>合计：<i class="total" id="AllTotal">0.00</i></strong>
			        <!--<span>减免：123.00</span>-->
			    </div>
			</div>
			<ul class="footer_ul">
				<li>
					<a href="index.html">
						<span class="footer_span"> 
							<img src="img/index.png" />
						</span><br />
						首页
					</a>
				</li>
				<li>
					<a href="classify.html">
						<span class="footer_span">
							<img src="img/class.png" />
						</span><br />
						分类
					</a>
				</li>
				<li>
					<a href="member.html">
						<span class="footer_span">
							<img src="img/member.png" />
						</span><br />
						会员
					</a>
				</li>
				<li>
					<a href="javascript:;" class="style">
						<span class="footer_span">
							<img src="img/checked_cart.png" />
						</span><br />
						购物袋
					</a>
				</li>
				<li>
					<a href="mine.html">
						<span class="footer_span">
							<img src="img/mine.png" />
						</span><br />
						我的
					</a>
				</li>
			</ul>
		</footer>
		
		<script>
			$(function(){
				// 数量减
				$(".minus").click(function() {
					var t = $(this).parent().find('.num');
					t.text(parseInt(t.text()) - 1);
					if (t.text() <= 1) {
						t.text(1);
					}
					TotalPrice();
				});
				// 数量加
				$(".plus").click(function() {
					var t = $(this).parent().find('.num');
					t.text(parseInt(t.text()) + 1);
					if (t.text() <= 1) {
						t.text(1);
					}
					TotalPrice();
				});
				/******------------分割线-----------------******/
				  // 点击商品按钮
			  $(".goodsCheck").click(function() {
			    var goods = $(this).closest(".shop_group_item").find(".goodsCheck"); //获取本店铺的所有商品
			    var goodsC = $(this).closest(".shop_group_item").find(".goodsCheck:checked"); //获取本店铺所有被选中的商品
			    var Shops = $(this).closest(".shop_group_item").find(".shopCheck"); //获取本店铺的全选按钮
			    if (goods.length == goodsC.length) { //如果选中的商品等于所有商品
			      Shops.prop('checked', true); //店铺全选按钮被选中
			      if ($(".shopCheck").length == $(".shopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量
			        $("#AllCheck").prop('checked', true); //全选按钮被选中
			        TotalPrice();
			      } else {
			        $("#AllCheck").prop('checked', false); //else全选按钮不被选中 
			        TotalPrice();
			      }
			    } else { //如果选中的商品不等于所有商品
			      Shops.prop('checked', false); //店铺全选按钮不被选中
			      $("#AllCheck").prop('checked', false); //全选按钮也不被选中
			      // 计算
			      TotalPrice();
			      // 计算
			    }
			  });
			  // 点击店铺按钮
			  $(".shopCheck").click(function() {
			    if ($(this).prop("checked") == true) { //如果店铺按钮被选中
			      $(this).parents(".shop_group_item").find(".goods_check").prop('checked', true); //店铺内的所有商品按钮也被选中
			      if ($(".shopCheck").length == $(".shopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量
			        $("#AllCheck").prop('checked', true); //全选按钮被选中
			        TotalPrice();
			      } else {
			        $("#AllCheck").prop('checked', false); //else全选按钮不被选中
			        TotalPrice();
			      }
			    } else { //如果店铺按钮不被选中
			      $(this).parents(".shop_group_item").find(".goods_check").prop('checked', false); //店铺内的所有商品也不被全选
			      $("#AllCheck").prop('checked', false); //全选按钮也不被选中
			      TotalPrice();
			    }
			  });
			  // 点击全选按钮
			  $("#AllCheck").click(function() {
			    if ($(this).prop("checked") == true) { //如果全选按钮被选中
			      $(".goods_check").prop('checked', true); //所有按钮都被选中
			      TotalPrice();
			    } else {
			      $(".goods_check").prop('checked', false); //else所有按钮不全选
			      TotalPrice();
			    }
			    $(".shopCheck").change(); //执行店铺全选的操作
			  });
				//计算
			  function TotalPrice() {
			    var allprice = 0; //总价
			    $(".shop_group_item").each(function() { //循环每个店铺
			      var oprice = 0; //店铺总价
			      $(this).find(".goodsCheck").each(function() { //循环店铺里面的商品
			        if ($(this).is(":checked")) { //如果该商品被选中
			          var num = parseInt($(this).parents(".shop_info").find(".num").text()); //得到商品的数量
			          var price = parseFloat($(this).parents(".shop_info").find(".price").text()); //得到商品的单价
			          var total = price * num; //计算单个商品的总价
			          oprice += total; //计算该店铺的总价
			        }
			        $(this).closest(".shop_group_item").find(".ShopTotal").text(oprice.toFixed(2)); //显示被选中商品的店铺总价
			      });
			      var oneprice = parseFloat($(this).find(".ShopTotal").text()); //得到每个店铺的总价
			      allprice += oneprice; //计算所有店铺的总价
			    });
			    $("#AllTotal").text(allprice.toFixed(2)); //输出全部总价
			  }
			});

		</script>
	</body>
</html>
